<template>
	<div class="binding-wechat">
		<div class="main">
			<div class="title">
				请绑定手机号
			</div>
			<div class="tip">WELCOME TO THE SYSTEM</div>
			<el-form>
				<el-form-item prop="phone">
					<el-input
						v-model="formData.phone"
						autocomplete="off"
						prefix-icon="iconfont iframe-iconshouji"
						placeholder="请输入手机号"
						:clearable="true"
						maxlength="11"
					></el-input>
				</el-form-item>
				<el-form-item prop="smscode">
					<div class="smscode">
						<el-input
							class="el-input"
							v-model="formData.smscode"
							autocomplete="off"
							prefix-icon="iconfont iframe-iconshouji"
							placeholder="请输入验证码"
							:clearable="true"
						></el-input>
						<el-button type="primary" :disabled="time < 60" @click="sendCode">{{ codeText }}</el-button>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button @click="submit" class="submit" type="primary">立即绑定</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="copyRight">copyright © 2023 {{ proName }} All rights Reserved</div>
	</div>
</template>

<script>
import request from "@/common/request"
let timer = null

export default {
	name: "binding-wechat",
	props: {},
	data() {
		return {
			formData: {
				phone: "",
				smscode: "",
			},
			time: 60,
			proName: window.$conf.commonConf.projectName,
		}
	},
	computed: {
		codeText() {
			return this.time === 60 ? "获取验证码" : `${this.time}s后重试`
		},
		isTruePhone() {
			if (!this.formData.phone) {
				return false
			}
			if (this.formData.phone[0] != 1) {
				return false
			}
			if (this.formData.phone.length != 11) {
				return false
			}
			return true
		},
	},
	created() {
		const query = this.$route.query
		if (query.type === "wx") {
			if (query.unionid) {
				return
			}
		} else if (query.type === "qq") {
			if (query.openid) {
				return
			}
		}
		window.localStorage.clear()
		window.location = "/"
	},
	methods: {
		async sendCode() {
			if (this.time < 60) {
				return
			}
			if (!this.isTruePhone) {
				return this.$message.error("请输入正确的手机号")
			}
			try {
				this.time--
				await request("post", "/api/sendCode", {
					mobile: this.formData.phone,
					type: 1,
				})
				timer = setInterval(() => {
					if (this.time <= 0) {
						clearInterval(timer)
						this.time = 60
						return
					}
					this.time--
				}, 1000)
			} catch (error) {}
		},
		async submit() {
			if (!this.isTruePhone) {
				return this.$message.error("请输入正确的手机号")
			}
			if (!this.formData.smscode) {
				return this.$message.error("请输入验证码")
			}
			if (this.$route.query.type === "wx") {
				this.wechat()
			} else if (this.$route.query.type === "qq") {
				this.qq()
			}
		},

		async wechat() {
			try {
				const res = await request("post", "/bindingWeChatLogin", {
					phone: this.formData.phone,
					smscode: this.formData.smscode,
					unionId: this.$route.query.unionid,
					openid: this.$route.query.openid,
					avatar: decodeURIComponent(this.$route.query.headimgurl),
					nickname: this.$route.query.nickname,
				})
				if (res.code === 0) {
					this.$message.success("绑定成功")
					window.localStorage.setItem("token", res.data.token)
					window.localStorage.setItem("fortressRefreshToken", res.data.refreshToken)
					window.localStorage.setItem("fortressExpiredTime", res.data.expiredTime)
					this.$router.push("/home")
					return
				}
				throw new Error(res.msg)
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		async qq() {
			try {
				const res = await request("post", "/bindingQqLogin", {
					phone: this.formData.phone,
					smscode: this.formData.smscode,
					openid: this.$route.query.openid,
					avatar: decodeURIComponent(this.$route.query.headimgurl),
					nickname: this.$route.query.nickname,
				})
				if (res.code === 0) {
					this.$message.success("绑定成功")
					window.localStorage.setItem("token", res.data.token)
					window.localStorage.setItem("fortressRefreshToken", res.data.refreshToken)
					window.localStorage.setItem("fortressExpiredTime", res.data.expiredTime)
					this.$router.push("/home")
					return
				}
				throw new Error(res.msg)
			} catch (error) {
				this.$message.error(error.message)
			}
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.binding-wechat {
	background: url("../assets/img/login_bg.png") no-repeat center top / cover;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	.main {
		position: fixed;
		width: 600px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		padding: 50px 40px 30px;
		background: #fff;
		.title {
			font-size: 30px;
			color: #14bddb;
			text-align: center;
			margin-bottom: 10px;
		}
		.tip {
			font-size: 16px;
			color: #999;
			text-align: center;
			margin-top: 10px;
			margin-bottom: 25px;
		}
		.el-input {
			margin-right: 10px;
		}
		.smscode {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.submit {
			width: 100%;
		}
	}
	.copyRight {
		width: 100%;
		position: absolute;
		bottom: 20px;
		left: 0;
		text-align: center;
		font-size: 15px;
		color: #6e9cff;
	}
}
</style>
